<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/m_master">

<div layout:fragment="content">
    <link rel="stylesheet" href="/m/css/bottlecms-moment-page.css">
    <input type="hidden" id="filedir" name="filedir" value="momen">
    <div class="page-group">
        <div class="page page_moment_create">
            <header class="head-nav-wrap">
                <div class="head-nav ">
                    <div class="nav-title">
                        创建动态
                    </div>
                    <div class="nav-left">
                        <a href="javascript:;" onclick="bottlecms.back()">
                            <i class="icon icon-bottlecms-100"></i>
                        </a>
                    </div>
                    <div class="nav-right">
                        <span class="_color js-submit">发布</span>
                    </div>
                </div>
            </header>
            <div class="page-content infinite-scroll">
                <form id="thisform" action="/m/ajax/momen/create" bottlecms-form-ajax="" target="/m/moment/me"
                      method="post">
                    <div class="bcui-form">
                        <div class="form-item">
                            <textarea name="content" placeholder="说说此刻的想法…" class="content"
                                      style="height:120px"></textarea>
                        </div>
                        <textarea name="media" style="display: none;"></textarea>
                        <!-- 图片 -->
                        <span th:if="${mediaType eq 'image'}">
                        <input type="hidden" name="mediaType" value="image">
                        <ul class="bcui-photo-list photobox">
                            <li class="addbtn bcui-upload-box">
                                <input type="file" class="addpics" accept="image/*"/>
                            </li>
                        </ul>
                        </span>
                        <!-- 视频 -->
                        <span th:if="${mediaType eq 'video'}">
                        <input type="hidden" name="media_type" value="video">
                        <ul class="bcui-photo-list photobox">

                            <li class="videobox" style="display:none;width: unset;height: unset;">
                                <video class="video" style="background: #000;" width="200" controls="controls"
                                       preload="" src=""></video>
                                <i class="del">×</i></li>


                            <li class="addbtn bcui-upload-box">
                                <input type="file" class="addvideo" accept="video/*"/>
                            </li>
                        </ul>
                        </span>

                        <nav class="handle-list" style="margin-top: 5rem;">
                            <div class="list-item  locationbox" style="padding-left:0; padding-right: 0;">
                                <div class="left-icon"><i class="icon-bottlecms-11"></i></div>
                                <div class="item-title">
                                    所在位置
                                </div>
                                <div class="item-info">
                                    <label class="bcui-switch switch-lg">
                                        <input type="checkbox" value="1" checked name="locationSwitch"
                                               style="outline: none;">
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                        </nav>
                        <input type="hidden" name="latitude" value="">
                        <input type="hidden" name="longitude" value="">
                        <input type="hidden" name="location" value="">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var MapConfig = {key: "2TNBZ-G6OH2-FQSUC-CMZOH-QUA2Z-2BBFI", name: "myapp"};
    </script>

    <div th:replace="layout/m_layout::systemJs"></div>
    <script id="javascript-bottlecms-moment-page" type='text/javascript'
            src="/m/js/moment/bottlecms-moment-page.js"></script>

    <script src="/m/js/moment/create-image.js" type="text/javascript" th:if="${mediaType eq 'image'}"></script>
    <script src="/m/js/moment/create-video.js" type="text/javascript" th:if="${mediaType eq 'video'}"></script>
    <script type="text/javascript">
        $('.js-submit').click(function (event) {
            $('#thisform').submit();
        });
        $("textarea.content").focus();
    </script>
    <script type="text/javascript">
        loadExtend(['geolocation'], function () {
            getLocation2(function (data) {
                if (data) {
                    data = JSON.parse(data);
                    console.log(data);
                    if (data.lat && data.lng) {
                        $('input[name="latitude"]').val(data.lat);
                        $('input[name="longitude"]').val(data.lng);
                        var location = data.nation;
                        if (data.province) location += '·' + data.province;
                        if (data.city) location += '·' + data.city;
                        if (data.addr) location += '·' + data.addr;

                        $('input[name="location"]').val(location);
                        $('.locationbox').show();
                        $('.locationbox .item-title').text(location);
                    }
                }
            })
        });

        // 定位
        function getLocation2(refun) {
            if (bottlecms.cookie('location')) {
                if (refun) return refun(bottlecms.cookie('location'));
            } else {
                var geolocation = new qq.maps.Geolocation(MapConfig.key, MapConfig.name);
                var positionNum = 0;
                $(function () { //定位
                    geolocation.getLocation(function (position) {
                            // console.log(position);
                            var positionstr = JSON.stringify(position);
                            bottlecms.cookie('location', positionstr, {
                                expires: 1
                            });
                            if (refun) return refun(positionstr);
                            return false;
                        },
                        geolocation.getIpLocation(
                            function (position) {
                                // console.log(position);
                                if (bottlecms.cookie('location') == null) {
                                    var positionstr = JSON.stringify(position);
                                    bottlecms.cookie('location', positionstr, {
                                        expires: 1
                                    });
                                    if (refun) return refun(positionstr);
                                }
                            }
                        )
                        , function () {
                            // bottlecms.toast("获取位置失败!");
                            //如果位置失败就取IP位置

                        }, {
                            timeout: 5000
                        });
                })
            }
        }

        function showPosition(position) {
            positionNum++;
            document.getElementById("demo").innerHTML += "序号：" + positionNum;
            document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };

        function showErr() {
            positionNum++;
            document.getElementById("demo").innerHTML += "序号：" + positionNum;
            document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";
            document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
        };

    </script>
</div>
</html>
